<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.7.1.js"></script>
    <link href="css/reg.css" rel="stylesheet" />
</head>

<body>
    <div class="logindiv">
        <h2 class="title">
            <span>注册</span>
            <!-- <span>验证码登录</span> -->
        </h2>
        <div class="style">
            <form action="" method="post" name="form">
                <div><span>账号：</span><input type="text" id="userid" placeholder="请输入手机号"></div><br>
                <div><span>密码：</span><input type="password" id="userpwd" placeholder="请输入密码"></div><br>
                <div><span>昵称：</span><input type="text" id="usernick" placeholder="请输入昵称"></div><br>
                <div><span>头像：</span><input type="file" id="useravator" ></div><br>
                <div><input type="hidden" id="newfilename"></div>
                <div><button onclick="checkReg()">立即注册</button></div>
                <span id="msg"></span>
            </form>
        </div>
    </div>
    </div>
    <script>
        $("#useravator").on('change', function () {
            var form = new FormData();
            form.append("file",this.files[0]);
            var settings = {
                "url": "http://localhost:8080/demo/FileUploadServlet",
                "method": "POST",
                "timeout": 0,
                "processData": false,
                "mimeType": "multipart/form-data",
                "contentType": false,
                "data": form
            };

            $.ajax(settings).done(function (response) {
                console.log(JSON.parse(response).filename);
                // console.log(response);
                $("#newfilename").val(JSON.parse(response).filename);
            });
        })


        function checkReg() {
            event.preventDefault(); //阻止表单提交默认行为
            //用户输入的账号和密码获取到
            var userid = $("#userid").val();
            var userpwd = $("#userpwd").val();
            var usernick = $("#usernick").val();
            var useravator = $("#newfilename").val();
            //创建json数据 次数据就是向服务器提交的数据
            var obj = {
                "userid": userid,
                "userpwd": userpwd,
                "usernick": usernick,
                "useravator": useravator
            }
            //访问后端接口
            $.ajax({
                url: "http://localhost:8080/demo/RegServlet",
                method: "post",
                dataType: "json",
                data: JSON.stringify(obj), //obj是一个json对象,通过JSON.stringify()把他转成字符串，向服务器发送的数据
                success: function (res) {
                    if (res.code == 200) {
                        //本地存储
                        // window.localStorage.setItem("user", JSON.stringify(res.data))
                        window.location.href = "login.html";
                    } else {
                        $("#msg").html(res.msg);
                        // alert(res.msg);
                    }
                }
            })
        }
    </script>

</body>

</html>